<template>
<div class="menu-list">
    <div v-for="(item) in menu_data" :key="item.id">
        <a :href="item.path | pathFilter">
            {{ item.name }}
        </a>
    </div>
</div>
</template>

<script>
export default {
    props: ['menu_data'],
    filters: {
        pathFilter(val) {
            return '/wawa' + val;
        }
    }
}
</script>

<style lang="scss" scoped>
.menu-list {
    padding-top: 1rem;
    text-align: center;

    a {
        text-decoration: none;
        display: inline-block;
        color: #b8b8b8;
        font-size: .9rem;
        line-height: 1.8;

        &:hover {
            color: #4caf50;
        }
    }
}
</style>
